<template>
  <div v-loading="orderTrackLoading" class="orderTrackDetail">
    <ContentWrap>
      <el-steps :active="activeValue" finish-status="success" align-center class="stepClass">
        <el-step v-for="(item, index) of stepList" :key="index" :title="item.title" icon="el-icon-shopping-cart-2" :class="{'isShow': !item.isShow}" />
      </el-steps>
      <div v-for="(list, index) of dataList" v-show="list.isShow" :key="index" class="description">
        <span class="state">{{ list.title }}</span>
        <span>{{ list.operateTime }}</span>
        <span>{{ list.content }}</span>
      </div>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import { getOrdereTracks } from '@/api/mscInfo'
import { parseTime } from '@/utils/index'
export default {
  components: {
    ContentWrap
  },
  props: {
    orderTrack: {
      type: Array,
      default: () => ({})
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orderTrackLoading: false,
      stepList: [{
        title: '付款',
        isShow: false
      }, {
        title: '审核',
        isShow: false
      }, {
        title: '分拨',
        isShow: false
      }, {
        title: '公司发货',
        isShow: false
      }, {
        title: '完成',
        isShow: false
      }],
      dataList: [],
      activeValue: 0
    }
  },
  created() {
    this.getOrdereTracksDetail()
  },
  methods: {
    indexMethod(index) {
      return index + 1
    },
    formatTracksDetail(res) {
      const list = res
      const keyArr = [0, 1, 2, 3, 4]

      list.forEach((item, index) => {
        switch (Number(item.node)) {
          case 0:
            item.title = '付款'
            item.isShow = true
            this.stepList[0].isShow = true
            this.activeValue = 1
            break
          case 1:
            item.title = '审核'
            item.isShow = true
            this.stepList[1].isShow = true
            this.activeValue = 2
            break
          case 2:
            item.title = '分拨'
            item.isShow = true
            this.stepList[2].isShow = true
            this.activeValue = 3
            break
          case 3:
            item.title = '公司发货'
            item.isShow = true
            this.stepList[3].isShow = true
            this.activeValue = 4
            break
          case 8:
            item.title = '完成'
            item.isShow = true
            this.stepList[4].isShow = true
            this.activeValue = 5
            break
          default:
            item.isShow = false
            if (keyArr.indexOf(index) === -1) {
              if (this.stepList[index]) this.stepList[index].isShow = false
            }
            break
        }
        item.operateTime = parseTime(item.operateTime)
      })
      this.dataList = [...list]
      this.$nextTick(() => {
        this.orderTrackLoading = false
      })
    },
    /**
     * 获取订单跟踪详情
     */
    getOrdereTracksDetail() {
      const { sourceSystem } = this.$route.query

      this.orderTrackLoading = true
      if (sourceSystem === '0') {
        getOrdereTracks(this.orderId).then(res => {
          if (res.success === 1) {
            const newData = []
            Object.keys(res.data).forEach(key => { newData.push(res.data[key][0]) })
            this.formatTracksDetail(newData)
          }
        })
      } else {
        this.formatTracksDetail(this.orderTrack)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.stepClass {
  padding: 50px 0;
}
.description {
  @include flex($justify:space-between);
  width: 82%;
  margin: 0 auto;
  border-bottom: 1px solid #cccccc;
  line-height: 32px;
  & span {
    margin-right: 40px;
  }
  & span.state {
    color: #16BC83;
  }
  .el-divider {
    margin-top: 10px !important;
  }
  & span:first-child {
    flex: 0 0 10% !important;
  }
  & span:nth-child(2) {
    flex: 0 0 15% !important;
  }
  & span:last-child {
    flex: 0 0 70% !important;
  }
}
.description:nth-child(5) {
  line-height: 26px;
}
/*---------步骤条样式---start------*/
$border-sizes: 1px;
$background_color: #C0C4CC;
$el-step-icon-height: 40px;
$el-step-icon-width: 40px;
$el-step-icon-font-size: 14px;
$el-step-icon-background: #FFF;
$el-step-icon-margin: 2.5%;
$is-finish-background: #EB6F67;
$el-step_title_is-process: #666666;
$el-step__description_is-finish: #999999;
/*---------步骤条样式---end------*/

.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.isShow .el-step__head.is-success {
  color: $el-step_title_is-process;
}

.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.isShow .el-step__title.is-success {
  color: $el-step_title_is-process;
}

/*步骤条样式修改------------start----------*/
/*is-finish 圆圈颜色*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish {
//   color: $is-finish-background !important;
//   border-color: $is-finish-background !important;
// }

/*is-process 圆圈颜色*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process {
//   color: $background_color;
//   border-color: $background_color;
// }

/*is-wait 圆圈颜色*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait {
//   color: $background_color;
//   border-color: $background_color;
// }

/*is-finish title 颜色*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-finish {
//   color: $el-step_title_is-process;
//   font-weight: 700;
// }
  /*is-process  title 颜色*/
.el-steps.el-steps--horizontal[data-v-9ebad220] .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
  font-weight: 700;
  color: $el-step_title_is-process;
  font-size: 14px !important;
}
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title {
  font-size: 14px !important;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
/*description 颜色*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__description.is-finish {
//   color: $el-step__description_is-finish;
// }
/*is-finish 进程结束，is-process 状态颜色非加粗*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
//   font-weight: 700;
//   color: $el-step_title_is-process;
// }

/* is-finish line连线粗细*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__line {
//   position: absolute;
//   border-color: inherit;
//   background-color: $is-finish-background;
//   margin-top: $el-step-icon-margin;
//   border: $border-sizes solid;
// }

/* is-process line连线粗细*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__line {
//   border-color: inherit;
//   background-color: $background_color;
//   margin-top: $el-step-icon-margin;
//   border: $border-sizes solid;
// }

/* is-wait line连线粗细*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__line {
//   border-color: inherit;
//   background-color: $background_color;
//   margin-top: $el-step-icon-margin;
//   border: $border-sizes solid;
// }

/* 已完成 圆圈大小修改*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__icon {
//   z-index: 1;
//   width: $el-step-icon-width;
//   height: $el-step-icon-height;
//   font-size: $el-step-icon-font-size;
//   border: $border-sizes solid;
//   background: $el-step-icon-background;
// }

/* 过度点 圆圈大小修改*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__icon {
//   z-index: 1;
//   width: $el-step-icon-width;
//   height: $el-step-icon-height;
//   border: $border-sizes solid;
//   font-size: $el-step-icon-font-size;
//   background:$el-step-icon-background;
//   color: $is-finish-background !important;
//   border-color: $is-finish-background !important;
// }

/* 未完成 圆圈大小修改*/
// .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__icon {
//   z-index: 1;
//   width: $el-step-icon-width;
//   height: $el-step-icon-height;
//   font-size: $el-step-icon-font-size;
//   border: $border-sizes solid;
//   background:$el-step-icon-background;
// }
</style>
